<template>
  <div class="order-list-container"
    ref="wrap">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>设置</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/supply_setting' }">供应设置</el-breadcrumb-item>
      <el-breadcrumb-item>第三方销售政策</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :rules="rules"
        :model="supMaid"
        ref="formData">
        <h1>销售政策</h1>
        <el-form-item label="房型加价方式："
          required></el-form-item>
        <el-form-item class="clearfix">
          <el-form-item prop="scale">
            <span>加价比例：&nbsp;&nbsp;</span>
            <el-input-number controls-position="right"
              v-model="supMaid.scale"
              :min="0"
              :max="100"></el-input-number>&nbsp;&nbsp;
            <span>%</span>
          </el-form-item>
          <el-form-item style="margin-top:15px;"
            prop="ratio">
            <span>分佣比例：&nbsp;&nbsp;</span>
            <el-input-number controls-position="right"
              v-model="supMaid.ratio"
              :min="0"
              :max="100"></el-input-number>&nbsp;&nbsp;
            <span>%</span>
          </el-form-item>
        </el-form-item>
        <div class="information-btns"
          :style="{width:width}">
          <el-button type="primary"
            size="small"
            @click="sure('formData')">保存</el-button>
          <el-button @click="back"
            size="small">取消</el-button>
        </div>
      </el-form>

    </div>

  </div>
</template>

<script>
import { getSellInfo, setThirdSell } from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      width: "",
      id: "",
      supMaid: {},
      rules: {
        scale: [{ required: true, message: "请输入加价比例", trigger: "blur" }],
        ratio: [{ required: true, message: "请输入分佣比例", trigger: "blur" }]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    back() {
      this.$router.back();
    },
    //获取销售政策信息
    _getSellInfo() {
      getSellInfo({ id: this.id }).then(res => {
        this.supMaid = res.data.supMaid
          ? res.data.supMaid
          : {
              num: 0,
              scale: 0,
              ratio: 0
            };
      });
    },
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          setThirdSell({
            id: this.id,
            raise: this.supMaid.scale,
            cent: this.supMaid.ratio
          }).then(res => {
            if (!res.data.errCode) {
              this.$message({
                type: "success",
                message: "修改成功"
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this.id = this.$route.query.id;
    this._getSellInfo();
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + "px";
  }
};
</script>
<style lang="scss" scoped>
.easy-content {
  h1 {
    font-size: 16px;
    text-align: left;
    color: #6d2377;
    padding: 15px 0;
  }
  .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .information-btns {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
    margin-left: -30px;
    z-index: 1111;
  }
  .avatar {
  }
}
</style>